<template>
  <div class="heartbeat">
    <el-table :data="tableData" border>
      <el-table-column label="车场名称" prop="parkName" width="200" align="center"></el-table-column>
      <el-table-column label="车场地址" prop="parkAddress" align="center"></el-table-column>
      <el-table-column label="最后交易时间" width="220" align="center">
        <template slot-scope="scope">
          {{scope.row.lastPayTime}} ({{scope.row.differDays}} 天)
        </template>
      </el-table-column>
      <el-table-column label="展示状态" width="80" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.isShow"
            active-color="#13ce66"
            @change="switchStatus(scope.row)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deletePark(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :hide-on-single-page="false"
      :current-page="form.currentPage"
      :page-sizes="[10, 15, 20, 30]"
      :page-size="form.pageSize"
      background
      style="margin-top:10px;"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      align="center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />


  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          currentPage: 1,
          pageSize: 10
        },
        tableData: [],
        total: 0
      }
    },

    mounted() {
      this.getTableData();
    },

    methods: {
      getTableData() {
        this.$axios({
          method: 'get',
          url: '/park/park-info/get-bolian-park-heartbeat',
          params: this.form
        }).then((res) => {
          if(res.code == 200) {
            res.data.records.forEach(item => {
              item.isShow = item.isShow == 1 ? true : false;
            })
            this.tableData = res.data.records;
            this.total = res.data.total;
          }
        })
      },

      switchStatus(e) {
        if(e.isShow) {
          this.switchParkShow(e);
        } else {
          this.$prompt('请输入关闭车场原因', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputValidator: function(e) {
              if(e) {
                return true
              } else {
                return false
              }
            },
            inputErrorMessage: '请输入关闭原因:'
          }).then(({ value }) => {
            this.switchParkShow(e,value)
          }).catch(() => {
            this.getTableData();
            this.$message({
              type: 'info',
              message: '取消关闭'
            });
          });
        }
      },

      switchParkShow (e,closeExplain) {
        const status = e.isShow == true ? '1' : '0';
        this.$axios({
          method: 'post',
          url: '/park/park-info/switchParkShow',
          data: this.$qs.stringify({ parkId: e.id, isShow: status, closeExplain: closeExplain })
        }).then((res) => {
          if (res.code == 200) {
            this.$message.success('规则状态修改成功！')
          } else {
            this.$message.warning('规则状态修改失败！')
          }
        })
      },

      deletePark(row) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$axios({
            method: 'post',
            url: '/park/park-info/delete-park',
            data: this.$qs.stringify({parkId: row.id})
          }).then((res) => {
            if(res.code == 200) {
              this.$message.success('删除成功');
              this.getTableData();
            } else {
              this.$message.warning('删除失败')
            }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      },

      // 分页修改每页显示条数
      handleSizeChange(val) {
        this.form.pageSize = val;
        this.getTableData();
      },
      // 分页跳转页面
      handleCurrentChange(val) {
        this.form.currentPage = val;
        this.getTableData();
      }
    }
  }
</script>

<style scoped>





</style>
